<template>
  <div>
    <basic-layout :title="title"
                  :showFilterBtn="true"
                  :showAddBtn="true"
                  @handleAdd="handleAdd"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <div class="body_box_main">
        <van-tabs v-model="active" @change="changeTabs" color="#4eb3e9">
          <van-tab v-for="(item, index) in tabs" :title="item.name" :name="item.index">
            <div class="body_box">
              <van-row class="listCon">
                <van-pull-refresh
                  class="vanScroller"
                  v-model="refreshing"
                  @refresh="onRefresh">
                  <van-list
                    class="vanList"
                    v-model="loading"
                    :finished="finished"
                    ::finished-text="listData.length ? '没有更多了' : ''"
                    @load="onLoad"
                  >
                    <div v-for="(item , index) in listData" :style="{ padding: calcMargin(index), }"
                         @click="jumpToDetail(item)">
                      <div class="mainStyle">
                        <div class="main_01">
                          <div class="main_01_top">
                            <div class="title">
                              <span>{{ item.DANH }}</span>
                            </div>
                            <div class="statusStyle">
                              {{ item.STATUS == '02' ? '申请提交' : (item.STATUS == '03' ? '申请通过' : (item.STATUS == '04' ? '申请驳回' : (item.STATUS == '05' ? '维修结束' : '-'))) }}
                            </div>
                          </div>
                          <div class="midStyle">
                            <div class="van-ellipsis">
                              <span>申请人:</span>&nbsp;
                              <span>{{ item.SQRNAME }}</span>
                            </div>
                            <div class="van-ellipsis">
                              <span>联系电话:</span>&nbsp;
                              <span>{{ $infoHiding.handlePhone(item.LIANXDH) }}</span>
                            </div>
                            <div class="van-ellipsis">
                              <span>申请部门:</span>&nbsp;
                              <span>{{ item.SHENQBM }}</span>
                            </div>
                            <div class="van-ellipsis">
                              <span>维修物资项(品名):</span>&nbsp;
                              <span>{{ item.lyqdStr }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-list>
                  <van-empty
                    v-if="!loading && !listData.length"
                    class="custom-image"
                    :image="require('../../../../assets/images/empty.png')"
                    description="暂无数据"
                  />
                </van-pull-refresh>
              </van-row>
            </div>
          </van-tab>
        </van-tabs>


        <!--          打开右侧搜索栏-->
        <queryPopup ref="queryPopupRef" @handleSearch="search" @handleReset="handleReset">
          <van-form class="filterBox">
            <label>申请人</label>
            <van-field v-model="queryParam.shenqr"/>
            <label>申请部门</label>
            <van-field v-model="queryParam.shenqbm"/>
          </van-form>
        </queryPopup>

      </div>
    </basic-layout>


    <!-- 详情 弹出框 -->
    <fullscreenModal :modal="fullscreenDetailModal" label="办公物资报修" editType='detail' :isShowEdit="false"
                     @handleClose="fullscreenDetailModal = false">
      <detail-form @close="fullscreenDetailModal = false" ref="detailFormRef" @refresh="onRefresh" />
    </fullscreenModal>

    <!-- 新增 弹出框 -->
    <fullscreenModal :modal="fullscreenModal" label="办公物资报修申请" :isAdd="true" editType='edit' :showSave="false"
                     @handleClose="fullscreenModal = false" @handleSave="$refs.editFormRef.handleSave()"
                     @handleCancel="fullscreenModal = false">
      <edit-form @close="fullscreenModal = false" ref="editFormRef" @refresh="onRefresh" />
    </fullscreenModal>

    <full-loading v-if="fullLoading" />
  </div>
</template>
<script>
import {queryBgwzwxsq, queryLyqdBgwzwxsq} from "@api/srvAssurance/assetLabel/assetLabel";
import detailForm from "./detail";
import editForm from "./../../officeSuppliesRepair/apply/index";

export default {
  name: 'list',
  props: {},
  components: {
    detailForm,
    editForm,
  },
  data() {
    return {
      title: '办公物资报修',
      active: "02",
      tabs: [
        {
          index: "02",
          name: "申请提交",
        },
        {
          index: "03",
          name: "申请通过",
        },
        {
          index: "04",
          name: "申请驳回",
        },
        {
          index: "05",
          name: "维修结束",
        },
      ],

      refreshing: false,
      loading: false,
      finished: false,
      listData: [],
      queryParam: {
        shenqr: '',
        shenqbm: '',
        status: '',
        page: 1,
        rows: 10,
      },

      fullscreenDetailModal: false,
      fullscreenModal: false,
      fullLoading: false,
    }
  },

  created() {
  },
  computed: {},

  beforeMount() {
    let item = sessionStorage.getItem("office_supplies_repair_session");
    if (item) {
      this.active = item;
      this.queryParam.status = (this.active);
    }
  },

  methods: {
    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

    jumpToDetail(item) {
      this.fullscreenDetailModal = true;
      this.editType = "detail";
      this.isAdd = false;
      this.$refs.detailFormRef.resetForm(item);
    },

    search() {
      this.$refs.queryPopupRef.show = false
      this.onRefresh()
    },

    // 重置查询条件
    handleReset() {
      this.queryParam = {
        shenqbm: '',
        shenqr: '',
        status: this.queryParam.status,
        page: 1,
        rows: 10,
      }
      this.onRefresh();
    },

    onLoad() {
      this.queryParam.page++;
      this.getList();
    },

    onRefresh() {
      this.refreshing = false;
      this.finished = false;
      this.listData = [];
      this.queryParam.page = 1;
      this.getList();
    },

    async getList() {
      this.loading = true;
      await queryBgwzwxsq(this.queryParam).then((res) => {
        this.loading = false;
        this.refreshing = false;
        if (res.data) {
          if (res.data.length > 0) {
            let list = res.data;
            list.forEach((item) => {
              if (item.ID) {
                this.dealWzx(item);
              }
            });
          }
          this.listData = [...this.listData, ...res.data];
          if (this.listData.length >= res.totalCount) {
            this.finished = true;
          }
        } else {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      });
    },

    async dealWzx(item) {
      let param = {
        id: item.ID,
        rows: 999,
      }
      await queryLyqdBgwzwxsq(param).then((res) => {
        if (res.data) {
          item.lyqd = res.data;
          item.lyqdStr = this.dealLyqd(res.data);
        }
        this.$forceUpdate();
      })
    },

    dealLyqd(lyqd) {
      let str = '';
      lyqd.forEach((item) => {
        str += item.PINM + ',';
      });
      return str.substring(0, str.length - 1);
    },

    changeTabs() {
      this.clearQueryParam();
      this.initQueryParam();
      this.onRefresh();
      sessionStorage.setItem("office_supplies_repair_session", this.active);
    },

    clearQueryParam() {
      this.queryParam.shenqbm = '';
      this.queryParam.shenqr = '';
    },

    initQueryParam() {
      this.queryParam.status = (this.active);
      this.queryParam.page = 1;
      this.queryParam.rows = 10;
      this.listData = [];
    },

    handleAdd() {
      // this.$router.push({
      //   path: "/officeSuppliesRepair/apply",
      // })
      this.fullscreenModal = true;
      this.$refs.editFormRef.resetForm();
    },

  },
}
</script>
<style lang="less" scoped>

.body_box_main {
  background-color: #f9f9f9;
  height: 100%;


  .body_box {
    background-color: #f9f9f9;
    height: 100%;

    .listCon {
      height: 100%;

      .vanScroller {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 0px !important;
          height: 0px !important;
        }

        .vanList {

          .mainStyle {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
            max-height: 300px;
            padding: 5px 10px 0px 10px;

            .main_01 {
              flex-direction: column;
              justify-content: space-around;
              width: 100%;

              .main_01_top {
                height: 40px;
                width: 100%;
                font-size: 16px;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #eee;

                .title {
                  display: flex;

                  .vanTagStyle {

                    .title_span {
                      color: #f69b52;
                      font-weight: 600;
                    }
                  }
                }

                .statusStyle {
                  color: #ffc109;
                  font-size: 13px;
                }
              }

              .midStyle {
                max-height: 200px;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                position: relative;
                margin-bottom: 10px;

                .van-ellipsis {
                  color: #9e9e9f;
                  margin-top: 5px;
                  height: 24px;
                  line-height: 24px;

                  span:first-child {
                    font-size: 14px;
                  }

                  span:last-child {
                    font-size: 14px;
                    color: #504f4f;
                  }

                }
              }
            }
          }

          //.listMain {
          //  display: flex;
          //  align-items: center;
          //  flex-direction: column;
          //  justify-content: space-between;
          //  background: rgb(255, 255, 255);
          //  color: rgb(51, 51, 51);
          //  border: 1px solid rgb(220, 223, 230);
          //  border-radius: 6px;
          //  max-height: 300px;
          //  padding: 5px 10px 0px 10px;
          //
          //
          //  .main {
          //    display: flex;
          //    flex-direction: column;
          //    justify-content: space-around;;
          //    width: 100%;
          //
          //
          //    .topMain {
          //      height: 40px;
          //      width: 100%;
          //      font-size: 16px;
          //      font-weight: 600;
          //      display: flex;
          //      justify-content: space-between;
          //      align-items: center;
          //      position: relative;
          //      border-bottom: 1px solid #eee;
          //
          //      .title {
          //        display: flex;
          //
          //        .vanTagStyle {
          //
          //          span {
          //            color: #f69b52;
          //            font-weight: 600;
          //          }
          //
          //        }
          //      }
          //
          //      .statusStyle {
          //        color: #ffc109;
          //        font-size: 10px;
          //      }
          //    }
          //  }
          //
          //}

        }
      }
    }
  }
}

/deep/ .van-tabs {
  height: 100%;
}

/deep/ .van-tabs__content {
  height: calc(100% - 44px);
}

/deep/ .van-tab__pane {
  height: 100%;
}


.midMain {
  //max-height: 120px;
  max-height: 120px;
  //min-height: 80px;
  //height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  border-bottom: 1px solid #eee;

  .topContent {
    color: #9e9e9f;
    margin-top: 5px;
    height: 24px;
    line-height: 24px;

    span:first-child {
      font-size: 14px;
    }

    span:last-child {
      font-size: 14px;
      color: #504f4f;
    }
  }

  .buttonContent {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;

    .left {
      width: 80%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }

    .left_02 {
      width: 100%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }


    .btn {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
        font-size: 13px;
      }
    }
  }

  //&:before {
  //  content: '';
  //  position: absolute;
  //  margin-top: 100px;
  //  width: 100%;
  //  height: 1px;
  //  background: #8080804a;
  //}

}

.flexBtn {
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  p {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  div:nth-of-type(1) {
    box-sizing: border-box;
    border-right: 1px solid #eee;
    color: #f25454;
  }
}


</style>
